<template>
  <el-config-provider :locale="zhCn">
    <div class="delete-reminder">
      <!-- 筛选条件区域 -->
      <filter-form v-model="filterForm" :form-items="formItems" @search="handleSearch" @reset="resetFilter" @update:modelValue="handleFilterChange" />

      <!-- 列表展示区域 -->
      <div class="table-section">
        <el-table :data="reminderList" border style="width: 100%" v-loading="loading" class="custom-table">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column label="主体微信" width="220">
            <template #default="scope">
              <ai-wechat-info :avatar-url="scope.row.wxUserurl || ''" :user-name="scope.row.wxUserName || ''" />
            </template>
          </el-table-column>
          <el-table-column label="好友信息" width="220">
            <template #default="scope">
              <ai-wechat-info :avatar-url="scope.row.sendWxUserurl || ''" :user-name="scope.row.sendWxUserName || ''" />
            </template>
          </el-table-column>
          <el-table-column label="发送信息">
            <template #default="scope">
              <span>{{ scope.row.message || '-' }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button type="text" @click="openAddFriendDialog(scope.row.wxUserId)">添加好友</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" @pagination="handlePagination" />
    </div>
    <AddFriendDialog v-model="addFriendDialogVisible" :wx-id="addFriendWxId" @close="closeAddFriendDialog" />
  </el-config-provider>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { getDeleteReminderList } from '@/api/userMange/deleteUser';
import FilterForm from '@/components/FilterForm/index.vue';
import Pagination from '@/components/Pagination/index.vue';
import AiWechatInfo from '@/components/AiWechatInfo/index.vue';
import type { FormItem } from '@/components/FilterForm/index.vue';
import AddFriendDialog from '@/components/common/AddFriendDialog.vue';

// 筛选表单
const filterForm = reactive({
  wxName: '',
  sendWxName: ''
});

// 表单项配置
const formItems = computed<FormItem[]>(() => [
  {
    label: '微信昵称',
    prop: 'wxName',
    type: 'input',
    placeholder: '请输入用户微信昵称'
  },
  {
    label: '发送人昵称',
    prop: 'sendWxName',
    type: 'input',
    placeholder: '请输入发送人昵称'
  }
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const reminderList = ref<any[]>([]);
const loading = ref(false);

// 添加好友弹窗相关
const addFriendDialogVisible = ref(false);
const addFriendWxId = ref<string | undefined>(undefined);
const openAddFriendDialog = (wxId: string) => {
  addFriendWxId.value = wxId;
  addFriendDialogVisible.value = true;
};
const closeAddFriendDialog = () => {
  addFriendDialogVisible.value = false;
  addFriendWxId.value = undefined;
};

// 查询方法
const handleSearch = async (formData?: Record<string, any>) => {
  loading.value = true;
  try {
    const searchData = formData || filterForm;
    // 获取wxId
    const wxId = localStorage.getItem('msgprofile') ? JSON.parse(localStorage.getItem('msgprofile')!).wx_id : '';
    const params = {
      current: currentPage.value,
      size: pageSize.value,
      wxId: wxId,
      wxName: searchData.wxName || undefined,
      sendWxName: searchData.sendWxName || undefined
    };
    // 移除 undefined
    Object.keys(params).forEach((key) => {
      if (params[key as keyof typeof params] === undefined) delete params[key as keyof typeof params];
    });
    const res = await getDeleteReminderList(params);
    if (res && (res as any).code === 200) {
      const data = (res as any).data || {};
      reminderList.value = data.records || [];
      total.value = data.total || 0;
    } else {
      ElMessage.error((res as any).msg || '获取数据失败');
    }
  } catch (error) {
    ElMessage.error('获取数据失败');
  } finally {
    loading.value = false;
  }
};

// 重置筛选
const resetFilter = () => {
  filterForm.wxName = '';
  filterForm.sendWxName = '';
  currentPage.value = 1;
  pageSize.value = 10;
  handleSearch();
};

// 分页方法
const handlePagination = ({ pageNum, pageSize: size }: { pageNum: number; pageSize: number }) => {
  currentPage.value = pageNum;
  pageSize.value = size;
  handleSearch();
};

// 处理筛选条件变化
const handleFilterChange = (val: any) => {
  filterForm.wxName = val.wxName || '';
  filterForm.sendWxName = val.sendWxName || '';
};

// 初始化
onMounted(() => {
  handleSearch();
});
</script>

<style scoped lang="scss">
.delete-reminder {
  padding: 20px;
  min-height: calc(100vh - 40px);

  .table-section {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .custom-table {
      :deep(.el-table__header) {
        th {
          background-color: #f5f7fa;
          color: #606266;
          font-weight: 600;
        }
      }
      :deep(.el-table__row) {
        &:hover {
          td {
            background-color: #f5f7fa;
          }
        }
      }
    }
  }
}
</style>
